<template>
  <div class="bar2-echart" ref="chartRef"></div>
</template>

<script setup>
import { onMounted, watch, ref, nextTick } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
  passScore: {
    type: Number,
    default: 80,
  },
});

const chartRef = ref(null);
let chartInstance = null;

const getBarColor = (v) =>
  v > props.passScore
    ? {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          { offset: 0, color: "#2ad2c9" },
          { offset: 1, color: "#3be6b5" },
        ]),
      }
    : {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          { offset: 0, color: "#ff7e5a" },
          { offset: 1, color: "#ffb36a" },
        ]),
      };

const getLabelColor = (idx) => (idx < 3 ? "#2ad2c9" : "#ff7e5a");

function renderChart() {
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }
  const yData = props.data.map((item) => item.name);
  const xData = props.data.map((item) => item.value);
  chartInstance.setOption({
    grid: {
      left: "5%", // 适当调整，保证80px宽度能显示
      right: "20%",
      top: 10,
      bottom: 10,
      containLabel: true,
    },
    xAxis: {
      type: "value",
      min: 0,
      max: 100,
      splitLine: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
    },
    yAxis: {
      type: "category",
      data: yData,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: "#262626",
        fontSize: 12,
        fontWeight: 500,
        align: "right",
        margin: 18,
        width: 122,
        overflow: "break",
        formatter: function (value) {
          // 最多显示3行，每行最多8个字
          const maxLine = 2;
          const maxLen = 18;
          let result = "";
          let line = 0;
          for (let i = 0; i < value.length; i += maxLen) {
            line++;
            if (line > maxLine) {
              result = result.trimEnd() + "...";
              break;
            }
            result += value.substr(i, maxLen) + "\n";
          }
          return result.trim();
        },
      },
    },
    series: [
      {
        type: "bar",
        data: xData.map((v, idx) => ({
          value: v,
          itemStyle: getBarColor(v),
        })),
        barWidth: 18,
        barCategoryGap: "38%",
        label: {
          show: true,
          position: "right",
          formatter: (params) => `${params.value}%`,
          color: (params) => getLabelColor(params.dataIndex),
          fontSize: 12,
          fontWeight: 500,
          offset: [8, 0],
        },
        itemStyle: {
          borderRadius: [0, 10, 10, 0],
        },
        z: 3,
      },
    ],
    animation: true,
  });
}

onMounted(() => {
  nextTick(renderChart);
});

watch(
  () => props.data,
  () => {
    nextTick(renderChart);
  },
  { deep: true }
);
</script>

<style scoped>
.bar2-echart {
  width: 100%;
  min-height: 320px;
}
</style>
